<template>
 <div id="">
  <header id="header" class="alt">
    <div class="logo">
      <a href="index.html">Drone <span>SoundSentinel开发</span></a>
    </div>
    <!-- menu菜单 -->
    <a href="#menu">菜单</a>
  </header><!-- Nav -->
  <nav id="menu" ref="menuRef">
    <ul class="links">
      <li><a href="/main">首页</a></li>
      <li><a href="/records">飞行记录</a></li>
    </ul>
  </nav>
  <section id="records" class="wrapper style3">
    <div class="inner">
      <header class="align-center">
        <h2>声学监测无人机飞行记录</h2>
        <p>点击记录查看详细监测轨迹</p>
      </header>
      <div class="records-container">
        <div class="record-item" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);">
          <a href="/src/map.html" class="record-link">
            <h3>2025-03-15 飞行任务</h3>
            <p>地点: 成都市 | 时长: 45分钟 | 高度: 120米</p>
          </a>
        </div>
        <div class="record-item" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);">
          <a href="map.html?id=2" class="record-link">
            <h3>2025-02-26 航拍任务</h3>
            <p>地点: 自贡市 | 时长: 30分钟 | 高度: 80米</p>
          </a>
        </div>
        <div class="record-item" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);">
          <a href="map.html?id=3" class="record-link">
            <h3>2025-01-12 巡检任务</h3>
            <p>地点: 富顺县 | 时长: 60分钟 | 高度: 150米</p>
          </a>
        </div>
      </div>
    </div>
  </section>

  <footer id="footer">
    <div class="container">
      <ul class="icons">
        <li><a href="#" class="icon fa-twitter"><span class="label">推特</span></a></li>
        <li><a href="#" class="icon fa-facebook"><span class="label">脸书</span></a></li>
        <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
        <li><a href="#" class="icon fa-envelope-o"><span class="label">邮箱</span></a></li>
      </ul>
    </div>
  </footer>
  <div class="copyright">
    <a>SoundSentinel制作</a>
  </div>
 </div>
</template>

<script setup>
import $ from 'jquery';
import '../assets/css/main.css'
import { ref,onMounted } from 'vue'

const menuRef = ref(null);

(function($) {

/**
 * Generate an indented list of links from a nav. Meant for use with panel().
 * @return {jQuery} jQuery object.
 */
$.fn.navList = function() {

  var	$this = $(this);
    $a = $this.find('a'),
    b = [];

  $a.each(function() {

    var	$this = $(this),
      indent = Math.max(0, $this.parents('li').length - 1),
      href = $this.attr('href'),
      target = $this.attr('target');

    b.push(
      '<a ' +
        'class="link depth-' + indent + '"' +
        ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
        ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
      '>' +
        '<span class="indent-' + indent + '"></span>' +
        $this.text() +
      '</a>'
    );

  });

  return b.join('');

};

/**
 * Panel-ify an element.
 * @param {object} userConfig User config.
 * @return {jQuery} jQuery object.
 */
$.fn.panel = function(userConfig) {

  // No elements?
    if (this.length == 0)
      return $this;

  // Multiple elements?
    if (this.length > 1) {

      for (var i=0; i < this.length; i++)
        $(this[i]).panel(userConfig);

      return $this;

    }

  // Vars.
    var	$this = $(this),
      $body = $('body'),
      $window = $(window),
      id = $this.attr('id'),
      config;

  // Config.
    config = $.extend({

      // Delay.
        delay: 0,

      // Hide panel on link click.
        hideOnClick: false,

      // Hide panel on escape keypress.
        hideOnEscape: false,

      // Hide panel on swipe.
        hideOnSwipe: false,

      // Reset scroll position on hide.
        resetScroll: false,

      // Reset forms on hide.
        resetForms: false,

      // Side of viewport the panel will appear.
        side: null,

      // Target element for "class".
        target: $this,

      // Class to toggle.
        visibleClass: 'visible'

    }, userConfig);

    // Expand "target" if it's not a jQuery object already.
      if (typeof config.target != 'jQuery')
        config.target = $(config.target);

  // Panel.

    // Methods.
      $this._hide = function(event) {

        // Already hidden? Bail.
          if (!config.target.hasClass(config.visibleClass))
            return;

        // If an event was provided, cancel it.
          if (event) {

            event.preventDefault();
            event.stopPropagation();

          }

        // Hide.
          config.target.removeClass(config.visibleClass);

        // Post-hide stuff.
          window.setTimeout(function() {

            // Reset scroll position.
              if (config.resetScroll)
                $this.scrollTop(0);

            // Reset forms.
              if (config.resetForms)
                $this.find('form').each(function() {
                  this.reset();
                });

          }, config.delay);

      };

    // Vendor fixes.
      $this
        .css('-ms-overflow-style', '-ms-autohiding-scrollbar')
        .css('-webkit-overflow-scrolling', 'touch');

    // Hide on click.
      if (config.hideOnClick) {

        $this.find('a')
          .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');

        $this
          .on('click', 'a', function(event) {

            var $a = $(this),
              href = $a.attr('href'),
              target = $a.attr('target');

            if (!href || href == '#' || href == '' || href == '#' + id)
              return;

            // Cancel original event.
              event.preventDefault();
              event.stopPropagation();

            // Hide panel.
              $this._hide();

            // Redirect to href.
              window.setTimeout(function() {

                if (target == '_blank')
                  window.open(href);
                else
                  window.location.href = href;

              }, config.delay + 10);

          });

      }

    // Event: Touch stuff.
      $this.on('touchstart', function(event) {

        $this.touchPosX = event.originalEvent.touches[0].pageX;
        $this.touchPosY = event.originalEvent.touches[0].pageY;

      })

      $this.on('touchmove', function(event) {

        if ($this.touchPosX === null
        ||	$this.touchPosY === null)
          return;

        var	diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
          diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
          th = $this.outerHeight(),
          ts = ($this.get(0).scrollHeight - $this.scrollTop());

        // Hide on swipe?
          if (config.hideOnSwipe) {

            var result = false,
              boundary = 20,
              delta = 50;

            switch (config.side) {

              case 'left':
                result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
                break;

              case 'right':
                result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
                break;

              case 'top':
                result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
                break;

              case 'bottom':
                result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
                break;

              default:
                break;

            }

            if (result) {

              $this.touchPosX = null;
              $this.touchPosY = null;
              $this._hide();

              return false;

            }

          }

        // Prevent vertical scrolling past the top or bottom.
          if (($this.scrollTop() < 0 && diffY < 0)
          || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {

            event.preventDefault();
            event.stopPropagation();

          }

      });

    // Event: Prevent certain events inside the panel from bubbling.
      $this.on('click touchend touchstart touchmove', function(event) {
        event.stopPropagation();
      });

    // Event: Hide panel if a child anchor tag pointing to its ID is clicked.
      $this.on('click', 'a[href="#' + id + '"]', function(event) {

        event.preventDefault();
        event.stopPropagation();

        config.target.removeClass(config.visibleClass);

      });

  // Body.

    // Event: Hide panel on body click/tap.
      $body.on('click touchend', function(event) {
        $this._hide(event);
      });

    // Event: Toggle.
      $body.on('click', 'a[href="#' + id + '"]', function(event) {

        event.preventDefault();
        event.stopPropagation();

        config.target.toggleClass(config.visibleClass);

      });

  // Window.

    // Event: Hide on ESC.
      if (config.hideOnEscape)
        $window.on('keydown', function(event) {

          if (event.keyCode == 27)
            $this._hide(event);

        });

  return $this;

};
})($);

onMounted(()=>{
const $menu = $(menuRef.value)
const $body = $('body') 
$menu
      .append('<a href="#menu" class="close"></a>')
      .appendTo($body)
      .panel({
        delay: 500,
        hideOnClick: true,
        hideOnSwipe: true,
        resetScroll: true,
        resetForms: true,
        side: 'right'
      });
})

</script>